<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
      <van-button class="edit-btn" type="danger" plain round size="mini" @click="isEditShow=!isEditShow"
        >{{ isEditShow ? '完成':'编辑' }}</van-button>
    </van-cell>
    <van-grid class="my-grid" :gutter="10">
      <van-grid-item 
        class="grid-item" 
        v-for="(item,index) in userChannels" 
        :key="item.id"
        @click="onUserChannelClick(index,item)"
      >
        <!-- 处于编辑状态 且 不是激活的哪些元素 -->
        <van-icon slot="icon" v-if="isEditShow && item.name!=='推荐'" name="clear"></van-icon>
        <span :class="activeIndex===index ? 'text active':'text'" slot="text">{{item.name}}</span>
      </van-grid-item>
    </van-grid>
    <!-- /我的频道 -->
    <!-- 频道推荐 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>
    <van-grid class="recommend-grid" :gutter="10">
      <van-grid-item class="grid-item" v-for="item in recommendChannels" @click="onAddChannel(item)" :key="item.id" icon="plus" :text="item.name" />
    </van-grid>
    <!-- /频道推荐 -->
  </div>
</template>

<script>
import { getAllChannels,addUserChannel,deleteUserChannel } from '@/api/channel'
import { setItem } from '@/utils/storage'
export default {
  name: "ChannelEdit",
  components: {},
  props: {
    // 我的频道数据
    userChannels:{
      type:Array,
      required:true
    },
    // 高亮的下标
    activeIndex:{
      type:Number,
      required:true
    }
  },
  data() {
    return {
      allChannels:[], // 全部频道数据
      isEditShow:false // 是否处于编辑状态
    };
  },
  computed: {
    // 思路： 频道推荐数据  = 全部频道数据  - 我的频道数据
    recommendChannels(){
      // 遍历全部频道数据，把每个频道ID 判断是否存在于我的频道数据中【该频道ID是否和我的频道中某个频道的ID相同】，如果不存在说明他就是推荐品频道数据里面的
      // let list = this.allChannels.filter(val=>{
      //   let findIndex = this.userChannels.findIndex(channel=>{
      //     return channel.id === val.id
      //   }) 
      //   return findIndex === -1
      // })
      // return list
      // 简写
      return this.allChannels.filter(val=>{
        return this.userChannels.findIndex(channel=>channel.id===val.id) === -1
      })
      // let list = []  // 推荐频道列表数据
      // // 遍历所有频道的每个数据
      // this.allChannels.forEach(val=>{
      //   // 判断该数据是否存在于我的频道数据里面 【ID是否相同】
      //   let findIndex = this.userChannels.findIndex(channel=>{
      //     return channel.id === val.id
      //   })
      //   // 该频道不存在于我的频道数据中 
      //   if(findIndex===-1){
      //     list.push(val)
      //   }
      // })
      // return list
    }
  },
  created() {
    this.loadAllChannels()
  },
  methods: {
    // 请求全部频道数据
    async loadAllChannels(){
      try {
        let { data:res } = await getAllChannels()
        this.allChannels = res.data.channels
      } catch (error) {
        // 报错处理
        this.$toast.fail('获取全部频道出错')
      }
    },
    // 推荐频道添加到我的频道
    async onAddChannel(val){
      try {
        // 数据持久化
        if(this.$store.state.user){
          // 登录了，同步到线上
          await addUserChannel([{
            id:val.id,  // 频道ID
            seq:this.userChannels.length
          }])
          // 追加到我的频道中
          this.userChannels.push(val)
        }else{
          // 追加到我的频道中
          this.userChannels.push(val)
          // 未登录，整个userChannels保存到本地
          setItem('TOUTIAO_CHANNELS',this.userChannels)
        }
      } catch (error) {
         this.$toast.fail('添加频道失败')
      }
    },
    // 我的频道标签被点击
    onUserChannelClick(idx,val){
      // 思路： 判断处于那种状态
        // 编辑状态： 删除功能
        // 非编辑状态： 关闭弹框 跳转到对应Tab 
      if(this.isEditShow){
          // 是推荐不可以删除
          if(val.name === '推荐') return
          // 点击如果是激活的元素或者前面的元素，那么需要让激活下标-1
          if(idx<=this.activeIndex){
            this.$emit('update:active-index',this.activeIndex-1)
          }
          this.userChannels.splice(idx,1)
          // 同步去
          this.deleteChannelSync(val)
      }else{
        // 更新父组件的 active为当前点击的下标
        this.$emit('update:active-index',idx)
        // 关闭弹框
        this.$emit('close-popup')
      }
    },
    // 删除同步本地或线上
    async deleteChannelSync(val){
      try {
          if(this.$store.state.user){
            // 同步线上
            await deleteUserChannel(val.id)
          }else{
            //  同步本地
            setItem('TOUTIAO_CHANNELS',this.userChannels)
          }
      } catch (error) {
        this.$toast.fail('删除失败')
      }
    }
  }
};
</script>

<style scoped lang="less">
.channel-edit {
  padding: 85px 0;

  .title-text {
    font-size: 32px;
    color: #333333;
  }

  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #f85959;
    border: 1px solid #f85959;
  }

  /deep/ .grid-item {
    width: 160px;
    height: 86px;
    .van-grid-item__content {
      white-space: nowrap;
      background-color: #f4f5f6;
      .van-grid-item__text, .text {
        font-size: 28px;
        color: #222;
        margin-top: 0;
      }
      .active {
        color: red;
      }
      .van-grid-item__icon-wrapper {
        position: unset;
      }
    }
  }

  /deep/ .my-grid {
    .grid-item {
      .van-icon-clear {
        position: absolute;
        right: -10px;
        top: -10px;
        font-size: 30px;
        color: #cacaca;
        z-index: 2;
      }
    }
  }

  /deep/ .recommend-grid {
    .grid-item {
      .van-grid-item__content {
        flex-direction: row;
        .van-icon-plus {
          font-size: 28px;
          margin-right: 6px;
        }
      }
    }
  }
}
</style>
